

$(function() {
    //上传图片
    var uploader = WebUploader.create({
        swf: '../plugins/webuploader/Uploader.swf',
        // 文件接收服务端。
        server: '/users/file.do',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
            id: '.picker',
            multiple: false //只能选择一个文件
        },

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },
        formData: {},
        disableGlobalDnd: true,
        fileSingleSizeLimit: 200 * 1024 * 1024, //单文件不能超过2M
        fileNumLimit: 2, //文件总数量, 超出则不允许加入队列
        fileVal: 'pic', //设置文件上传域的name;

        //fileSizeLimit: //验证文件总大小是否超出限制，超出则不允许加入队列。

        duplicate: false, //去掉重复文件

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false
    });

    //添加的文件数量
    var fileCount = 0,

        //文件大小
        fileSize = 0;

    //文件加入到队列时触发
    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail js_thumb">' +
                    '<img>' +
                    // 是否添加文件名字
                    '<div class="info">' + file.name + '</div>' +
                    '<p class="state"></p>' +
                '</div>'
                ),
            $img = $li.find('img');

            fileCount++;
            fileSize += file.size;

        //console.log('按钮id:','#rt_' + file.source.ruid);
        //将当前加入到队列中的文件id存入当前button的data属性中;'#rt_' + file.source.ruid是当前上传按钮的id;
        $('#rt_' + file.source.ruid).data('file-id', file.id).closest('.js_uplodimg_wrap').find('.js_thumb').replaceWith($li);

        // $list为容器jQuery实例
        //$list.append( $li );

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr( 'src', src );
        },200, 200);
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress .progress-bar');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<div class="progress progress-striped active">' +
            '<div class="progress-bar" role="progressbar" style="width: 0%">' +
            '</div>' +
            '</div>').appendTo( $li ).find('.progress-bar');
        }

        $li.find('p.state').text('上传中');
        console.log(file )
        console.log(percentage )

        $percent.css( 'width', percentage * 100 + '%' );
    });

    uploader.on( 'uploadSuccess', function( file ) {
        console.log('已上传');
        console.log(file);
        $( '#'+file.id ).find('p.state').text('已上传');
    });


    uploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).find('p.state').text('上传出错');
    });

    //上传完成后触发(不管成功还是失败)
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').fadeOut();
    });

    //在文件加入队列之前触发
    uploader.on('beforeFileQueued', function( file ) {

        //使用
        var removeFileId = $('#rt_' + file.source.ruid).data('fileId');
        if(typeof removeFileId != 'undefined') {
            uploader.removeFile(uploader.getFile(removeFileId));
        }
    });

    //当文件被移除队列时触发
    uploader.onFileDequeued = function(file) {
        fileCount--;
        fileSize -= file.size;
    }

    $("#uploadBtn").on("click",function(){
        console.log('44')
        // 如果选择的文件是2个，则上传，否则不做任何事
        if(fileCount === 2) {
            uploader.option( 'formData', {
                realName: 'wpp',
                idCard: '123456'
            });
            uploader.upload();
        }
    });


});